<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="./data/favicon.ico">
    <script type="module" charset="UTF-8" src="./libs/three.js/Three.js"></script>
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <title>threejs-lesson-03</title>
</head>

<body>
    <div id="puidu-webgk-output"></div>
    <script type="module">
        import * as THREE from "./libs/three.js/three.js"
        //创建场景对象
        var scene = new THREE.Scene();
        //透视摄像机
        var prescamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        //渲染器
        var renderer = new THREE.WebGLRenderer();

        //添加坐标轴
        var axes = new THREE.AxesHelper(50);
        axes.setColors(0xFF0000, 0x00FF00, 0x0000FF);
        scene.add(axes);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("puidu-webgk-output").appendChild(renderer.domElement)
        //创建渲染对象
        var geometry = new THREE.BoxGeometry(5,5,5);
        var material = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube)
          
        cube.position.z = 10;
        cube.position.x = 10;
        cube.position.y = 10;
         //告诉立方体需要投射阴影
         cube.castShadow = true;

        prescamera.position.z = 35;
        prescamera.position.x = -30;
        prescamera.position.y = 45;
        //添加地面
        creatgroung(scene);
        //环境光
        creatAmbientLight(scene)
        //平行光
       //告诉渲染器需要阴影效果
       renderer.shadowMap.enabled = true;
       renderer.shadowMap.type =THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
       var directionalLight = new THREE.DirectionalLight("#ffffff");
        directionalLight.position.set(-40, 60, -20);

        directionalLight.shadow.camera.near = 0.1; //产生阴影的最近距离
        directionalLight.shadow.camera.far = 1000; //产生阴影的最远距离
        directionalLight.shadow.camera.left = -500; //产生阴影距离位置的最左边位置
        directionalLight.shadow.camera.right = 500; //最右边
        directionalLight.shadow.camera.top = 500; //最上边
        directionalLight.shadow.camera.bottom = -500; //最下面

        //这两个值决定使用多少像素生成阴影 默认512
        directionalLight.shadow.mapSize.height = 1024;
        directionalLight.shadow.mapSize.width = 1024;

    

        //告诉平行光需要开启阴影投射
        directionalLight.castShadow = true;

        scene.add(directionalLight);

        prescamera.lookAt(scene.position)

        renderer.render(scene, prescamera);
        
       function creatgroung(para_scene){
        var groundgeometry = new THREE.PlaneGeometry(100,100);
        var groungmaterial = new THREE.MeshLambertMaterial({color:0xCCCCCC});
        var ground = new THREE.Mesh(groundgeometry,groungmaterial);
        ground.rotation.x=-0.5*Math.PI;
        para_scene.add(ground);
        // 使平面就接收物体投掷过来的阴影
        ground.receiveShadow = true;
        };

        function creatAmbientLight(para_scene){
            var ambienLight = new THREE.AmbientLight(0xAAAAAA)
            para_scene.add(ambienLight);
        };
    </script>
</body>

</html>